<template>
	<div class="header">
		<header class="title">
			<div class="message" @click="message()"></div>
			<div class="logo">
				<i class="pic"></i>
				<b :class="{refresh:is,load_refresh:load_resh}" @click="load_refresh">
				</b>
			</div>
			<div class="search" @click="search"></div>
		</header>
		<!--搜索页-->
		<div :class="{search_frame:is,s_active:isSearch}" @click="allclick($event)">  
			<div class="top_bar">
				<span class="back"></span>
				<h3 class="s_title">搜索</h3>
				<span class="none"></span>
			</div>
			<form class="s_input_frame" target="_self" onsubmit="return false">
				<i :class="{s_kind:is,tt_p:touTiao,bd_p:baiDu,sm_p:shenMa}"></i>
				<div :class="{s_cover:is,sc_active:ks_active}"></div>
				<div :class="{kind_select:is,kind_select_active:ks_active}">
					<ul class="k_list">
						<li><i class="tt_k">新闻</i></li>
						<li><i class="sm_k">神马</i></li>
						<li><i class="bd_k">百度</i></li>
					</ul>
				</div>
				<div class="i_frame">
					<input type="search" name="h_search" id="h_search" placeholder="请输入搜索关键词" v-on:keyup="onkeyup($event)" v-model="search_value"/>
				</div>
			</form>
			<ul :class="{s_tip:is,s_tip_hid:isS_tip}" v-if="baiDu || shenMa">
				<li v-for="item in Search_list" v-if="baiDu"><a :href="'https://www.baidu.com/s?wd='+item">{{item}}</a></li>
				<li v-for="item in Search_list" v-if="shenMa"><a :href="'https://yz.m.sm.cn/s?q='+item.w+'&from=wm874865&safe=1&snum=6'">{{item.w}}</a></li>
			</ul>
			<ul :class="{TT_list:is,s_tip_hid:isS_tip}" v-if="touTiao">
				<li v-for="item in Search_list" v-if="item.title">
					<a :href="item.share_url" class="tt_article">
						<h3 class="a_title">{{item.title}}</h3>
						<ul class="a_img">
							<li v-for="list in item.image_list"><img :src="list.url"/></li>
						</ul>
						<div class="a_info">
							<span>{{item.source}}</span>
							<span>评论 {{item.comment_count}}</span>
							<span>2小时前</span>
						</div>
					</a>
				</li>
			</ul>
			
		</div>
		<nav>
			<ul class="link">
				<li v-for="(item,index) in show_list" :key='item.id' @click="tab(item,index)" >
					<router-link :to="item.url" :class="{t_btn:is,active:item.name==a_name}">{{item.kind}}</router-link>
				</li>
			</ul>
			
			<!--频道管理-->
			<div class="add" @click="management()"></div>
		</nav>
		<!--频道管理出现-->
		<div :class="{chanel:is,chanel_back:not}">
			<div class="toolbar">
				<div class="t_back" @click="tBack() ">
					<span class="t_icon"></span>
				</div>
				<h3 class="t_title">频道管理</h3>
				<div class="t_space"></div>
			</div>
			<div class="content">
				<p class="c_tips">点击删除以下频道</p>
				<ul class="c_list" @click="channel_del($event)">
					<li v-for="(item,index) in show_list">
						<span>{{item.kind}}</span>
					</li>
				</ul>
			</div>
			<div class="content">
				<p class="c_tips">点击添加以下频道</p>
				<ul class="c_list" @click="channel_add($event)">
					<li v-for="(item,index) in add_list">
						<span>{{item.kind}}</span>
					</li>
				</ul>
			</div>
		</div>
		<!--信息弹窗-->
		<div :class="{o_message:is,message_active:isMessage}">
			<div class="o_content">
				<div class="o_pic"></div>
				<span class="o_desc">已加载好您感兴趣的头条</span>
				<div class="o_open">立即打开</div>
				<div class="o_close" @click="message_dis()"></div>
			</div>
			
		</div>
	</div>
</template>

<script>
	
	export default{
		mounted(){
			//初始化Nav数据
			this.$store.commit('Navlist');
			
			if(this.$route.path=="/"){
				this.$router.push({
	                name: 'recommend',
	                query: {
	                    url:'/recommend',
	                    name:'recommend',
	                    num:0,
	                    id:0
	                }
	           });
	           
	            this.$store.commit('_getAllNews',{
	            	a:"/recommend",
	            	num:0,
	            	name:'recommend'
	            	
	            })
	            this.a_name='recommend';
			}else{
				//console.log(this.$route.query.url)
				var address=this.$route.query.url
				this.$store.commit('_getAllNews',{
					a:this.$route.query.url,
					num:0,
					name:this.$route.query.name
				})
			}
		},
		data(){
			return {
				a_name:this.$route.query.name,
				is:true,//类名添加
				not:true,
				isMessage:true,//信息页类名
				isSearch:true,//搜索页类名
				isS_tip:true,//百度提示联想类名
				ks_active:true,
				Search_list:[],//联想结果
				search_value:'',//搜索关键字
				//搜索类型
				touTiao:true,
				baiDu:false,
				shenMa:false
			}
		},
		computed:{
			
			show_list(){
				return this.$store.state.items
				
			},
			add_list(){
				return this.$store.state.add_items
			},
			load_resh(){
				return this.$store.state.load_resh
			},
			TT_list(){
				return this.$store.state.TT_list
			}
		},
		watch:{
			search_value(newv,oldv){//监听搜索框内容
				if(newv==''){
					this.Search_list=null;
					this.isS_tip=true
				}
			}
		},
		methods:{
			//搜索
			allclick(e){
				//console.log([e.target])
				//隐藏百度搜索结果
				if(e.target.tagName=="INPUT"){
					this.isS_tip=false
				}else{
					this.isS_tip=true
				};
				//返回主页
				if(e.target.className=="back"){
					this.isSearch=true
				}
				//搜索选项列表
				if(e.target.classList.contains("s_kind")){
					this.ks_active=false
				}else{this.ks_active=true}
				//搜索选择
				if(e.target.classList.contains("tt_k")){
					this.touTiao=true;
					this.baiDu=false;
					this.shenMa=false;
					this.onkeyup(e)
				}
				if(e.target.classList.contains("bd_k")){
					this.touTiao=false;
					this.baiDu=true;
					this.shenMa=false;
					this.onkeyup(e)
				}
				if(e.target.classList.contains("sm_k")){
					this.touTiao=false;
					this.baiDu=false;
					this.shenMa=true;
					this.onkeyup(e)
				}
					
				
			},
			search(){
				this.isSearch=false
			},
			onkeyup(e){//输入请求事件
				
				if(this.search_value!=null){
					//console.log([e.keyCode])
					var k=this.search_value
					
					//头条接口
					if(this.touTiao==true){
						this.$http.jsonp('http://www.toutiao.com/search_content/?offset=0&format=json&keyword='+k+'&autoload=true&count=20&cur_tab=1').then((res)=>{
	//						console.log(res.data.data)
							this.Search_list=res.data.data;
							this.isS_tip=false;
							if(res.data.data==''){
		                    	this.isS_tip=true
		                    }
						})
					}
					//神马搜索接口
					if(this.shenMa==true){
						//https://yz.m.sm.cn/s?q=12%E5%B2%81&from=wm874865&safe=1&snum=6
						//https://yz.m.sm.cn/s?q=8848&from=wm874865&safe=1&snum=6
						//https://yz.m.sm.cn/s?q=126&from=wm874865&safe=1&snum=6
						if(e.keyCode==13){
							location.href = 'https://yz.m.sm.cn/s?q='+k+'&from=wm874865&safe=1&snum=6'
							//https://www.baidu.com/s?wd=126
						}
						var timer=new Date
//						console.log(timer.getTime())
						this.$http.jsonp('https://sugs.m.sm.cn/web?t=w&uc_param_str=dnnwnt&scheme=https&q='+k+'&_='+timer.getTime()+'').then((res)=>{
//							console.log(res.data.r)
							this.Search_list=res.data.r
			                    //console.log(res)
			                    this.isS_tip=false
			                    if(res.data.r==''){
			                    	this.isS_tip=true
			                    }
						})
					}
					//https://m.baidu.com/s?word=77&from=1007976a
					//https://m.baidu.com/s?word=55&from=1007976a
					//https://m.baidu.com/s?word=99&from=1007976a
					//百度接口
					if(this.baiDu==true){
						if(e.keyCode==13){
							location.href = "https://www.baidu.com.cn/s?wd=" + k;
							//https://www.baidu.com/s?wd=126
						}
						this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", {
		                    params: {
		                        wd: k
		                    },
		                    jsonp: 'cb'
		                }).then((res) => {
		                    this.Search_list=res.data.s
		                    //console.log(res)
		                    this.isS_tip=false
		                    if(res.data.s==''){
		                    	this.isS_tip=true
		                    }
		                })
					}
				}
			},
			//load_more,pull加载
			load_refresh(){
				this.$store.state.load_resh=true;
				this.$store.commit('pull_road',{
					url:this.$route.query.url
				})
			},
			//Nav点击事件	
			tab(item,index){
				this.a_name=item.name
				this.$router.push({
	                name: 'recommend',
	                query: {
	                    name: item.name,
	                    url:item.url,
	                    id:item.id
	                }
	            })
				var address=item.url
				this.$store.commit('_getAllNews',{
					a:address,
					num:0,
					name:this.$route.query.name
				})
				this.$store.commit('reduce')
				document.scrollingElement.scrollTop=this.$store.state.items[this.$route.query.id].s_top
			},
			//nav 管理页
			management(){
				this.not=false
				
			},
			tBack(){
				this.not=true
			},
			message(){
				this.isMessage=false
				
			},
			message_dis(){
				this.isMessage=true
			},
			//top_del,标签管理
			channel_del(e){
				var _this=this;
				var nav=this.$store.state.items;
				if(e.target.tagName.toLowerCase()=="span"&&e.target.outerText!="推荐"){
					nav.forEach(function(el,i){
						if(e.target.outerText==el.kind){
							if(el.name==_this.$route.query.name){
								_this.a_name='recommend'
								_this.$router.push({
					                name: _this.a_name,
					                query: {
					                    name: _this.a_name,
					                    url:'/recommend',
					                    id:0
					                }
					           });
					           _this.$store.commit('_getAllNews',{
									a:'/recommend',
									num:0,
									name:_this.a_name
								})
							}
							_this.$store.state.add_items.push(nav[i])
							nav.splice(i,1)
							localStorage.setItem('showNav',JSON.stringify(nav))
							localStorage.setItem('hidNav',JSON.stringify(_this.$store.state.add_items))
						}
					})
				}
			},
			//bot_del,标签管理
			channel_add(e){
				var _that=this;
				var add_nav=this.$store.state.add_items;
				if(e.target.tagName.toLowerCase()=="span"){
					add_nav.forEach(function(ele,i){
						if(e.target.outerText==ele.kind&&_that.$store.state.items.length<16){
							_that.$store.state.items.push(add_nav[i])
							add_nav.splice(i,1)
							localStorage.setItem('hidNav',JSON.stringify(add_nav))
							localStorage.setItem('showNav',JSON.stringify(_that.$store.state.items))
						}
					})
				}
			}
			
		},
		
	}
	
	
</script>

<style lang="scss" type="text/css">
	@import "~scss/header";
	.active{
		color: red !important;
	}
</style>